<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>模拟双击</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				border: 1px solid pink;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button type="button">使用click模拟dblclick</button>
		<script type="text/javascript">
			// 使用click模拟dblclick
			// 在200ms之内连续点击两次视为一次双击事件
			// 将div背景颜色随机改变rgb(0-255,0-255,0-255)
			
			var btn = document.querySelector("button"),
				div = document.querySelector("div"),
				// arr = [1,2,3,4,5,6,7,8,9,0,"a","b","c","d","e","f"],
				// color = "#",
				pre_time = 0;
			btn.addEventListener("click", function() {
				var now_time = new Date().getTime();
				if(now_time - pre_time < 200){
					div.style.backgroundColor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
					
					// for(var i = 0; i < 6; i++){
					// 	color += arr[Math.floor(Math.random()*6)]
					// }
					// div.style.backgroundColor = color;
					// color = "#";
					
				}else {
					pre_time = now_time;
				}
				
				
			})
			
			
			
			
			

			// [1,2,3,4,5,6,7,8,9,0,a,b,c,d,e,f]
			// #87ceeb

			// ajax

			// mouseover mouseenter
			// mouseout  moseleave
			// 事件冒泡
			
			// mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout
			// mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
		</script>
	</body>
</html>
